<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 头部开始 -->
	<div class="head w">
		<div class="h-inner">
			<div class="h-left">YourLOGO</div>
			<div class="h-right clearfix">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">文章</a></li>
					<li><a href="#">作品</a></li>
					<li><a href="#">关于</a></li>
				</ul>
			</div>
		</div>
		<div class="h-icon">
			<a href="https://github.com/">
				<img src="img/icon-github.png"  />
			</a>
		</div>
	</div>
	<!-- 头部结束 -->
<!-- banner开始 -->
	<div class="banner w">
		<div class="b-text">
			<h4>标题1</h4>
			<p>这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文</p>
		</div>
	</div>
	<!-- banner结束 -->
<!-- product开始 -->
	<div class="product w">
		<div class="p-left">
			<div class="img">
				<img src="img/p-left.jpg" alt="" />
			</div>
			<div>
				<p>这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文</p>
			</div>
		</div>
		<div class="p-center">
			<div class="img">
				<img src="img/p-center.jpg" alt="" />
			</div>
			<div>
				<p>这里是正文，这里是正文，这里是正文，这里是正文</p>
			</div>
		</div>
		<div class="p-right">
			<div class="img">
				<img src="img/p-right.jpg" alt="" />
			</div>
			<div>
				<p>这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文</p>
			</div>
		</div>
	</div>
	<!-- product结束 -->
<!-- introduce开始 -->
	<div class="introduce w">
		<div class="in-img"> 
			<img src="img/touxiang.jpeg" width="160px" height="160px" />
		</div>
		<div class="in-h4">
			<h4>Hi, I'm YourName</h4>
		</div>
		<div class="in-p">
			<p>这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍这是一段长长的自我介绍这是一段长长的自我介绍这是一段长长的自我介绍这是一段长长的自我介绍这是一段长长的自我介绍这是一段长长的自我介绍这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍这是一段长长的自我介绍，这是一段长长的自我介绍这是一段长长的自我介绍这是一段长长的自我介绍</p>
		</div>
	</div>
	<!-- introduce结束 -->
<!-- footer开始 -->
	<div class="footer w">
		<div class="f-head clearfix">
			<ul>
				<li>主页</li>
				<li>文章</li>
				<li>作品</li>
				<li>关于</li>
			</ul>
		</div>
		<div class="f-xian"></div>
		<div class="f-main clearfix">
			<div>
				<ul>
					<h4>学习资料</h4>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>友情链接</h4>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>学习资料</h4>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>友情链接</h4>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
					<li><a href="#">link</a></li>
				</ul>
			</div>
			<div>
				<ul>
					<h4>友情链接</h4>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
					<li><a href="#">link</li>
				</ul>
			</div>
		</div>
		<div class="f-end">
			<div>版权信息</div>
			<div><img src="img/icon-github.png" alt="" /></div>
		</div>
	</div>
	<!-- footer结束 -->
</body>